<template>
	<div class="container" style="padding: 15px">
		<!-- table -->
		<bc-table
			:table-data="tableData"
			ref="table"
		>
			<!-- businessHandle -->
			<template slot="businessHandle">
				<div>
					<el-button
							size="mini"
							type="primary"
							@click="handleInsert"
					>新增
					</el-button>
				</div>
			</template>

			<!-- tableHandle -->
			<template slot="tableHandle">
				<el-table-column label="操作" width="220" slot="tableHandle">
					<template slot-scope="scope">
						<el-button
								size="mini"
								type="primary"
								@click="handleDetail(scope.row)"
						>查看
						</el-button>
						<el-button
								size="mini"
								type="primary"
								@click="handleEdit(scope.row)"
						>修改
						</el-button>
						<el-button
								size="mini"
								type="primary"
								@click="handleDelete(scope.row)"
						>删除
						</el-button>
					</template>
				</el-table-column>
			</template>
		</bc-table>
		<!-- table end -->
		<!-- form -->
		<el-dialog
				:title="form.state == 'insert' ? '行政规划新增' : '行政规划修改'"
				:visible.sync="form.visible"
				width="25%"
				:close-on-click-modal="false"
				@closed="dialogClose"
		>
			<el-form
					:model="form.data"
					:rules="form.rules"
					label-width="100px"
					label-suffix=":"
					size="small"
					ref="form"
					style="padding-right: 20px"
			>
				<el-form-item label="父级ID" prop="regionParentId">
					<el-input v-model="form.data.regionParentId" placeholder="请输入父级ID" clearable/>
				</el-form-item>
				<el-form-item label="政行编码" prop="regionCode">
					<el-input v-model="form.data.regionCode" placeholder="请输入政行编码" clearable/>
				</el-form-item>
				<el-form-item label="名称" prop="regionName">
					<el-input v-model="form.data.regionName" placeholder="请输入名称" clearable/>
				</el-form-item>
				<el-form-item label="行政级别" prop="regionLevel">
					<el-select v-model="form.data.regionLevel" placeholder="请选择行政级别">
						<el-option key="0" label="国家" value="0"></el-option>
						<el-option key="1" label="省" value="1"></el-option>
						<el-option key="2" label="市" value="2"></el-option>
						<el-option key="3" label="区/县" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="英文" prop="regionNameEn">
					<el-input v-model="form.data.regionNameEn" placeholder="请选择部门" clearable/>
				</el-form-item>
				<el-form-item label="纬度" prop="regionLatitude">
					<el-input v-model="form.data.regionLatitude" placeholder="请选择纬度" clearable/>
				</el-form-item>
				<el-form-item label="经度" prop="regionLongitude">
					<el-input v-model="form.data.regionLongitude" placeholder="请选择经度" clearable/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="form.visible = false">取 消</el-button>
				<el-button type="primary" @click="handleSubmit">确 定</el-button>
			</div>
		</el-dialog>
		<!-- form end -->
		<!-- detail -->
		<el-dialog
				title="行政规划详情"
				:visible.sync="detail.visible"
				width="25%"
				:close-on-click-modal="false"
		>
			<div class="detail">
				<el-row :gutter="20" v-for="item in detail.data">
					<el-col :span="9">{{item.name}}：</el-col>
					<el-col :span="15">{{item.value}}</el-col>
				</el-row>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="detail.visible = false">取 消</el-button>
				<el-button type="primary"  @click="detail.visible = false">确 定</el-button>
			</div>
		</el-dialog>
		<!-- detail end -->
	</div>
</template>

<script>
    import BcTable from '@/components/BcTable/index';
    import {bcSubmitAlert} from '@/utils/bc-form-data';
    import { getList, insertCompartment, updateCompartment, deleteCompartment, detailCompartment, selectByLevel, selectRedisByLevel } from '@/api/system/compartment';
    import {checkUser, detailUser, insertUser, updateUser} from '@/api/system/user';

    export default {
        name: 'compartment',
        components: {
            BcTable
        },
        data() {
            return {
                tableData: { // 行政区划
                    name: '行政区划信息表',
                    method: getList,
                    pageSize: 10,
                    data: [
                        {
                            prop: 'regionParentId',
                            label: '父级ID',
                            isSearch: true,
                            type: 'input',
                            searchKey: 'regionParentId'
                        }, {
                            prop: 'regionCode',
                            label: '政行编码',
                            isSearch: true,
                            type: 'input',
                            searchKey: 'regionCode'
                        }, {
                            prop: 'regionName',
                            label: '名称',
                            isSearch: true,
                            type: 'input',
                            searchKey: 'regionName'
                        }, {
                            prop: 'regionLevel',
                            label: '行政级别',
                            // backList: {
                            //     0: '成功',
                            //     1: '失败'
                            // },
                            // width: 70,
                            isSearch: true,
                            // isTable: false,
                            type: 'select',
                            searchKey: 'regionLevel',
                            list: [
                                {
                                    label:"国家",
                                    value: 0
                                },{
                                    label:"省",
                                    value: 1
                                },{
                                    label:"市",
                                    value: 2
                                },{
                                    label:"县/区",
                                    value: 3
                                },
                            ]
                        }, {
                            prop: 'regionNameEn',
                            label: '英文'
                        }, {
                            prop: 'regionLatitude',
                            label: '纬度',
                        }, {
                            prop: 'regionLongitude',
                            label: '经度'
                        }
                    ]
                },
                form: {
	                visible: false,
                    state: 'insert',
	                data: {
                        regionId:'',
                        regionParentId: '',
                        regionCode: '',
                        regionName: '',
                        regionLevel: '',
                        regionNameEn: '',
                        regionLatitude: '',
                        regionLongitude: '',
	                },
	                rules: {
                        regionParentId: [{required: true, message: '请输入父级ID', trigger: 'blur'}],
                        regionCode: [{required: true, message: '请输入政行编码', trigger: 'blur'}],
                        regionName: [{required: true, message: '请输入名称', trigger: 'blur'}],
                        regionLevel: [{required: true, message: '请选择行政级别', trigger: 'blur'}],
	                }
                },
                detail: {
                    visible: false,
                    data: []
                }
            };
        },
        methods: {
	        // 新增
            handleInsert(){
                this.form.regionId = ''
                this.form.state = 'insert'
				this.form.visible = true
            },

            // 修改
            handleEdit(row){
                this.form.state = 'update'
                bcSubmitAlert(detailCompartment, {regionId: row.regionId},true).then(res => {
                    this.form.data =  {
                        regionId: res.data.regionId,
                        regionParentId: res.data.regionParentId,
                        regionCode: res.data.regionCode,
                        regionName: res.data.regionName,
                        regionLevel: res.data.regionLevel + '',
                        regionNameEn: res.data.regionNameEn,
                        regionLatitude: res.data.regionLatitude,
                        regionLongitude: res.data.regionLongitude
                    }
                    this.form.visible = true
                })
            },

	        // 删除
	        handleDelete(row){
                this.$confirm('删除当前记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    bcSubmitAlert(deleteCompartment, {regionId: row.regionId}).then(res => {
                        this.$refs.table.resetList()
                    })
                }).catch(err => {

                })
	        },

            // 关闭弹窗
            dialogClose(){
                this.resetForm()
            },

	        // 重置表单
	        resetForm(){
                this.form.data = {
                    regionId:'',
                    regionParentId: '',
                    regionCode: '',
                    regionName: '',
                    regionLevel: '',
                    regionNameEn: '',
                    regionLatitude: '',
                    regionLongitude: '',
                }
                this.$nextTick(() => {
                    this.$refs.form.clearValidate()
                })
	        },

	        // 表单提交
            handleSubmit(){
                this.$refs.form.validate(valid => {
                    let data = JSON.parse(JSON.stringify(this.form.data))
                    if(valid){
                        if(this.form.state == 'insert'){
                            delete data.regionId
                            bcSubmitAlert(insertCompartment, data).then(res => {
                                this.$refs.table.resetList()
                                this.form.visible = false
                            })
                        } else {
                            bcSubmitAlert(updateCompartment, data).then(res => {
                                this.$refs.table.resetList()
                                this.form.visible = false
                            })
                        }
                    }
                });
            },

            // 详情
            handleDetail(row){
                var systemKeyArr = {
                    'regionParentId': '父级ID',
                    'regionCode': '政行编码',
                    'regionName': '名称',
                    'regionLevel': {
                        name: '行政级别',
                        list: {
                            '0': '国家',
                            '1': '省',
                            '2': '市',
                            '3': '县/区',
                        }
                    },
                    'regionNameEn': '英文',
                    'regionLatitude': '纬度',
                    'regionLongitude': '经度',
                }
                this.detail.data = []
                bcSubmitAlert(detailCompartment,{regionId: row.regionId}, true).then(res => {
                    for(let dk in systemKeyArr){
                        for(let k in res.data){
                            if(k == dk){
                                if(typeof systemKeyArr[dk] == 'string'){
                                    this.detail.data.push({
                                        name: systemKeyArr[dk],
                                        value: res.data[k]
                                    })
                                } else {
                                    this.detail.data.push({
                                        name: systemKeyArr[dk].name,
                                        value: systemKeyArr[dk].list[res.data[k]]
                                    })
                                }
                            }
                        }
                    }
                    this.detail.visible = true
                })
            }
        }
    };
</script>
<style scoped lang="scss">
	/deep/.el-select {
		width: 100%;
	}
	/* detail */
	.detail {
		padding: 0 20px;
		.el-col {
			margin: 10px 0;
		}
	}
	/* detail end */
</style>
